<template>
<div class="" :style="{height: $store.state.height + 'px'}" style="width: 100%;position: relative;">
  <div id="baidu-map-container" :style="{height: $store.state.height + 'px', width: '100%'}"></div>
  <div id="tools">
    <a id="clear" @click="clearSource()">Clear</a>
    <a id="download" download="features.json" ref="download">Download</a>
  </div>
</div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';

import TileGrid from 'ol/tilegrid/TileGrid';
import TileImage from 'ol/source/TileImage';
import { transform } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
// overlay
import Overlay from 'ol/Overlay';

var resolutions = [];
var maxZoom = 18;

// 计算百度使用的分辨率
for (var i = 0; i <= maxZoom; i++) {
  resolutions[i] = Math.pow(2, maxZoom - i);
}
var tilegrid = new TileGrid({
  origin: [0, 0], // 设置原点坐标
  resolutions: resolutions // 设置分辨率
});

// 创建百度地图的数据源
var baiduSource = new TileImage({
  projection: 'EPSG:3857',
  tileGrid: tilegrid,
  tileUrlFunction: function(tileCoord, pixelRatio, proj) {
    var z = tileCoord[0];
    var x = tileCoord[1];
    var y = tileCoord[2];

    // 百度瓦片服务url将负数使用M前缀来标识
    if (x < 0) {
      x = 'M' + (-x);
    }
    if (y < 0) {
      y = 'M' + (-y);
    }
    return `http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20160426&scaler=1&p=1`
  }
});

// 百度地图层
var baiduMapLayer2 = new TileLayer({
  source: baiduSource
});



export default {
  name: "olbdmap",
  title: "openlayers百度",
  data() {
    return {}
  },
  mounted() {
    let map = new Map({
      layers: [
        baiduMapLayer2
      ],
      view: new View({
        // 设置成都为地图中心
        center: transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
        // center: [0, 0],
        zoom: 5
      }),
      target: 'baidu-map-container'
    });

    map.on('click', evt => {
      console.log('1111111111111111', evt)
    })
  },
  methods: {
    clearSource() {
      source.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
    flex: 1;
    height: 100%;
    width: 100%;
}
#tools {
    position: absolute;
    top: 1rem;
    right: 1rem;
}
#tools a {
    display: inline-block;
    padding: 0.5rem;
    background: white;
    cursor: pointer;
}
</style>
